<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Media Queries: a simple mobile first design, step 1</title>
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        width: 90%;
        margin: 2em auto;
        font:
          1em/1.3 Arial,
          Helvetica,
          sans-serif;
      }

      a:link,
      a:visited {
        color: #333;
      }

      nav ul,
      aside ul {
        list-style: none;
        padding: 0;
      }

      nav a:link,
      nav a:visited {
        background-color: rgb(207 232 220 / 20%);
        border: 2px solid rgb(79 185 227);
        text-decoration: none;
        display: block;
        padding: 10px;
        color: #333;
        font-weight: bold;
      }

      nav a:hover {
        background-color: rgb(207 232 220 / 70%);
      }

      .related {
        background-color: rgb(79 185 227 / 30%);
        border: 1px solid rgb(79 185 227);
        padding: 10px;
      }

      .sidebar {
        background-color: rgb(207 232 220 / 50%);
        padding: 10px;
      }

      article {
        margin-bottom: 1em;
      }
    </style>
  </head>

  <body>
    <div class="wrapper">
      <header>
        <nav>
          <ul>
            <li><a href="">About</a></li>
            <li><a href="">Contact</a></li>
            <li><a href="">Meet the team</a></li>
            <li><a href="">Blog</a></li>
          </ul>
        </nav>
      </header>
      <main>
        <article>
          <div class="content">
            <h1>Veggies!</h1>
            <p>
              Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi
              welsh onion daikon amaranth tatsoi tomatillo melon azuki bean
              garlic.
            </p>

            <p>
              Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot
              courgette tatsoi pea sprouts fava bean collard greens dandelion
              okra wakame tomato. Dandelion cucumber earthnut pea peanut soko
              zucchini.
            </p>

            <p>
              Turnip greens yarrow ricebean rutabaga endive cauliflower sea
              lettuce kohlrabi amaranth water spinach avocado daikon napa
              cabbage asparagus winter purslane kale. Celery potato scallion
              desert raisin horseradish spinach carrot soko. Lotus root water
              spinach fennel kombu maize bamboo shoot green bean swiss chard
              seakale pumpkin onion chickpea gram corn pea. Brussels sprout
              coriander water chestnut gourd swiss chard wakame kohlrabi
              beetroot carrot watercress. Corn amaranth salsify bunya nuts nori
              azuki bean chickweed potato bell pepper artichoke.
            </p>

            <p>
              Nori grape silver beet broccoli kombu beet greens fava bean potato
              quandong celery. Bunya nuts black-eyed pea prairie turnip leek
              lentil turnip greens parsnip. Sea lettuce lettuce water chestnut
              eggplant winter purslane fennel azuki bean earthnut pea sierra
              leone bologi leek soko chicory celtuce parsley jícama salsify.
            </p>
          </div>
          <aside class="related">
            <p>
              All these veggies are brought to you by the
              <a href="https://veggieipsum.com/">Veggie Ipsum generator</a>.
            </p>
          </aside>
        </article>

        <aside class="sidebar">
          <h2>External vegetable-based links</h2>
          <ul>
            <li>
              <a
                href="https://www.thekitchn.com/how-to-cook-broccoli-5-ways-167323"
                >How to cook broccoli</a
              >
            </li>
            <li>
              <a href="https://www.bbcgoodfood.com/glossary/swiss-chard"
                >Swiss Chard</a
              >
            </li>
            <li>
              <a
                href="https://www.bbcgoodfood.com/recipes/collection/christmas-parsnip"
                >Christmas Parsnip Recipes</a
              >
            </li>
          </ul>
        </aside>
      </main>

      <footer>
        <p>&copy;2019</p>
      </footer>
    </div>
  </body>
</html>
